<template>
  <div class="page">
    <h2>医生处方排名</h2>

    <div class="controls">
      <el-input v-model="q" placeholder="按医生姓名/ID搜索" clearable style="flex:1" @clear="onClear" />
      <el-select v-model="filterDept" placeholder="全部科室" style="width:180px">
        <el-option label="全部科室" :value="''" />
        <el-option v-for="d in depts" :key="d" :label="d" :value="d" />
      </el-select>
      <el-date-picker v-model="range" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width:320px" />
      <div style="display:flex;gap:8px">
        <el-button type="primary" @click="refresh">刷新</el-button>
        <el-button @click="exportCSV">导出CSV</el-button>
      </div>
    </div>

    <div class="muted">说明：医生处方排名可用于识别高处方量医生，辅助合理用药管理与培训。本页面为静态演示，应结合处方数据与规范阈值。</div>

    <el-table :data="filtered" stripe border style="width:100%;margin-top:12px">
      <el-table-column prop="rank" label="#" width="60" />
      <el-table-column prop="doctorId" label="医生ID" width="120" />
      <el-table-column prop="name" label="医生姓名" width="160" />
      <el-table-column prop="dept" label="科室" width="140" />
      <el-table-column prop="prescriptions" label="处方数" width="120" />
      <el-table-column prop="totalItems" label="总开药量" width="120" />
      <el-table-column prop="avgPerPrescription" label="每处方平均用量" width="160" />
      <el-table-column prop="lastActive" label="最后开方" width="180" />
    </el-table>

    <div style="margin-top:8px;display:flex;gap:8px;align-items:center">
      <div style="flex:1"></div>
      <div class="muted">展示 {{ filtered.length }} 名医生</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const q = ref('');
const filterDept = ref('');
const range = ref([]);
const data = ref([]);

const DEFAULT = [
  { doctorId:'D-9001', name:'孙医生', dept:'精神科', prescriptions:120, totalItems:300, avgPerPrescription:(300/120).toFixed(2), lastActive:'2025-10-25 15:20' },
  { doctorId:'D-9002', name:'李医生', dept:'门诊', prescriptions:95, totalItems:240, avgPerPrescription:(240/95).toFixed(2), lastActive:'2025-10-24 11:05' },
  { doctorId:'D-9003', name:'王医生', dept:'住院', prescriptions:80, totalItems:210, avgPerPrescription:(210/80).toFixed(2), lastActive:'2025-10-23 09:40' }
];

onMounted(()=>{ data.value = JSON.parse(JSON.stringify(DEFAULT)).map((d,i)=>({ ...d, rank: i+1 })); });

const depts = computed(()=> Array.from(new Set(data.value.map(d=>d.dept))));

const filtered = computed(()=>{
  const qq = q.value.trim().toLowerCase();
  return data.value.filter(d=>{
    if(qq && !(d.name.toLowerCase().includes(qq) || d.doctorId.toLowerCase().includes(qq))) return false;
    if(filterDept.value && d.dept !== filterDept.value) return false;
    // 时间 range not applied in demo
    return true;
  }).sort((a,b)=>b.prescriptions - a.prescriptions).map((it,idx)=>({ ...it, rank: idx+1 }));
});

function exportCSV(){ const rows = [['rank','doctorId','name','dept','prescriptions','totalItems','avgPerPrescription','lastActive'], ...filtered.value.map(r=>[r.rank,r.doctorId,r.name,r.dept,r.prescriptions,r.totalItems,r.avgPerPrescription,r.lastActive])]; const txt = rows.map(r=>r.map(c=>`"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); const blob = new Blob([txt],{type:'text/csv'}); const url = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download='doctor_prescription_ranking.csv'; a.click(); URL.revokeObjectURL(url); }
function refresh(){ ElMessage.success('已刷新（演示）'); }
function onClear(){}
</script>

<style scoped>
.page{font-family: Arial, "Microsoft YaHei", sans-serif; margin:10px;}
h2{margin-top:-10px}
.controls{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.muted{color:#666;font-size:13px}
</style>